<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{float: left;border: solid 1px black;text-align: center;width:200px;}
        .box img{width:80%;}
        .box p:nth-of-type(1){line-height:20px;height:40px;overflow: hidden;}
    </style>
</head>
<body>
    
</body>
<script>
    var data = [{
        src : "https://img12.360buyimg.com/n7/jfs/t1/18963/33/18624/23420/63293625E87ebcf22/f7f457be48c0b252.jpg",
        price : "1499.00",
        intro : "荣耀X40 120Hz OLED硬核曲屏 5100mAh 快充大电池 7.9mm轻薄设计 5G手机",
        appraise : "5000+",
        shop : "荣耀京东官方自营旗舰店"
    },{
        src : "https://img12.360buyimg.com/n7/jfs/t1/37501/23/19102/106072/63317b01Ef4bc085f/7f3c3e1b1f6e196c.jpg",
        price : "1149.00",
        intro : "荣耀Play6T 6.74英寸高刷护眼屏 侧边指纹解锁 5000mAh大电池 全网通 5G手机",
        appraise : "20万+",
        shop : "荣耀京东官方自营旗舰店"
    },{
        src : "https://img14.360buyimg.com/n7/jfs/t1/44697/24/20933/38470/632873b9Ed6dbe896/d56052b618d1acd4.jpg",
        price : "5098.00",
        intro : "华为mate50 新品手机 全网通128GB 曜金黑 碎屏险套装",
        appraise : "100+",
        shop : "彭瑶旗舰店"
    },{
        src : "https://img11.360buyimg.com/n7/jfs/t1/129797/31/27273/44595/630f3b29E5f01c2b4/43fad9dcd9a79291.jpg",
        price : "2699.00",
        intro : "荣耀70 IMX800三主摄 双曲屏设计 高通骁龙778G Plus 66W快充 5G手机",
        appraise : "20万+",
        shop : "荣耀京东官方自营旗舰店"
    }];

    // 创建一个容器，准备存放页面结构字符
    var str = "";
    // 遍历数据
    data.forEach(function(val){
        // 根据提前规划的页面结构，将遍历得到的数据拼接进去
        str += '<div class="box"><img src="'+ val.src +'" alt=""><p>'+ val.intro +'</p><p>'+ val.price +'</p><p>'+ val.appraise +'</p><p>'+ val.shop +'</p></div>';
    })
    // 将拼接好的页面结构字符，打印到页面（打印到指定元素内）
    document.write(str);


</script>
</html>